<template>
	<article class="page page-pwdrnd-generator">
		<h4 class="text-center">随机密码生成器</h4>
		<form class="page-body">
			<div class="row">
				<div class="col-6 left">
					<fieldset>
						<legend>参数设置</legend>
						<div class="fieldset-content">
							<div class="form-group row-flex" align="center">
								<label class="row-flex-prefix">密码长度</label>
								<div class="row-flex-main">
									<input class="form-control" type="number" :min="1" v-model.trim="pwdLength" placeholder="密码长度" />
								</div>
							</div>
							<div class="form-group row-flex" align="center">
								<label class="row-flex-prefix">密码数量</label>
								<div class="row-flex-main">
									<input class="form-control" type="number" :min="1" v-model.trim="pwdCount" placeholder="密码数量" />
								</div>
							</div>
							<div class="form-group row-flex" align="center">
								<label class="row-flex-prefix">
									<input class="form-check-input" type="checkbox" v-model="upperLetter">
								</label>
								<div class="row-flex-main">大写字母 A-Z </div>
							</div>
							<div class="form-group row-flex" align="center">
								<label class="row-flex-prefix">
									<input class="form-check-input" type="checkbox" v-model="lowerLetter">
								</label>
								<div class="row-flex-main">小写字母 a-z </div>
							</div>
							<div class="form-group row-flex" align="center">
								<label class="row-flex-prefix">
									<input class="form-check-input" type="checkbox" v-model="digits">
								</label>
								<div class="row-flex-main">数字 0-9 </div>
							</div>
							<div class="form-group row-flex" align="center">
								<label class="row-flex-prefix">
									<input class="form-check-input" type="checkbox" v-model="symbols">
								</label>
								<div class="row-flex-main">特殊字符 !@#$%^&*()_+~`|}{[]\\:;?&gt;&lt;,./-=</div>
							</div>
							<div class="form-group row-flex" align="center">
								<label class="row-flex-prefix">
									<input class="form-check-input" type="checkbox" v-model="noSimilar">
								</label>
								<div class="row-flex-main">避免使用相似的字符 1lIioO0</div>
							</div>
							<div class="form-group row-flex form-group-main"></div>
							<div class="form-group row-flex">
								<label class="row-flex-prefix"></label>
								<div class="row-flex-main">
									<x-button type="primary" block @click="submitHandler">生 成</x-button>
								</div>
							</div>
						</div>
					</fieldset>
				</div>
				<div class="col-6 right">
					<fieldset>
						<legend>生成结果</legend>
						<div class="fieldset-content">
							<div class="form-group form-group-main">
								<textarea class="form-control" v-model="result" readonly></textarea>
							</div>
						</div>
					</fieldset>
				</div>
			</div>
		</form>
	</article>
</template>

<script>
export default {
	name: 'pwdrnd-generator',
	data () {
		return {
			upperLetter: true,
			lowerLetter: true,
			digits: true,
			symbols: true,
			noSimilar: false,
			result: '',
			pwdResult: [],
			pwdLength: 8,
			pwdCount: 1,
			loadingCount: 0
		}
	},
	methods: {
		// 生成密码
		submitHandler () {
			this.result = ''
			this.pwdResult = []
			let characterList = []
			if (this.upperLetter) {
				let arr = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('')
				characterList = [...characterList, ...arr]
			}
			if (this.lowerLetter) {
				let arr = 'abcdefghijklmnopqrstuvwxyz'.split('')
				characterList = [...characterList, ...arr]
			}
			if (this.digits) {
				let arr = '0123456789'.split('')
				characterList = [...characterList, ...arr]
			}
			if (this.symbols) {
				let arr = '!@#$%^&*()_+~`|}{[]\\:;?><,./-='.split('')
				characterList = [...characterList, ...arr]
			}
			if (this.noSimilar) {
				let similar = '1lIioO0'
				characterList = characterList.filter(v => !similar.includes(v))
			}
			if (characterList.length === 0) {
				return this.$toast('参数配置错误')
			}
			if (this.pwdCount <= 0) {
				return this.$toast('密码数量不能小于1')
			}
			if (this.pwdLength <= 0) {
				return this.$toast('密码长度不能小于1')
			}
			let pwdCount = this.pwdCount
			while (pwdCount > 0) {
				this.pwdResult.push(this.pwdGenerator(characterList))
				pwdCount--
			}
			this.result = this.pwdResult.join('\n')
		},
		// 单个密码生成
		pwdGenerator (characterList) {
      let pwd = ''
      let c = ''
			let k = 0
      if((typeof window.crypto.getRandomValues === 'function') ||
				(typeof window.msCrypto.getRandomValues === 'function') ) {
				let crypto = window.crypto || window.msCrypto
				let array = new Uint16Array(this.pwdLength)
				crypto.getRandomValues(array)
				for (let i = 0; i < this.pwdLength; i++) {
					k = Math.floor(array[i] / Math.pow(2, 16) * characterList.length)
					c = characterList[k]
					pwd += c
				}
      } else {
				for (let i = 0; i< this.pwdLength; i++) {
					k = Math.floor(Math.random() * characterList.length)
					c = characterList[k]
					pwd += c
				}
      }
			return pwd
		}
	},
}
</script>

<style scoped lang="less">
@import "~@/assets/css/_mixins.less";
@import "~@/assets/css/_color.less";
.page-pwdrnd-generator {
	display: flex;
	flex-direction: column;
	fieldset {
		height: 100%;
		.fieldset-content {
			height: calc(100% - 2em);
			display: flex;
			flex-direction: column;
		}
	}
	.page-body {
		height: 0;
		flex-grow: 1;
		& > .row {
			height: 100%;
		}
		.form-group-main {
			align-items: stretch;
			height: 0;
			flex-grow: 1;
		}
		.left {
			.row-flex {
				.row-flex-prefix {width: 4.5em; text-align: right;}
				.row-flex-main {text-align: left;}
				& + .row-flex {
					margin-top: .5em;
				}
			}
		}
		.right {
			textarea {
				display: block;
				width: 100%;
				height: 100%;
				background-color: #fff;
				resize: none;
			}
		}
	}
}
</style>
